<template>
  <div class="p-4">
    <Row>
      <Col span="24">
        <Card title="搜索" v-if="anChart?.searchForm && anChart?.searchForm != 'DefaultBaseForm'">
          <BasicForm ref="formRef" :schemas="searchFormFields" @submit="handleSubmit" />
        </Card>
      </Col>
      <!-- 循环遍历 anChartFields -->
      <Col v-for="(field, index) in renderDataFields" :key="index" :span="field.span">
        <Card :title="field.anChartField.name" :bodyStyle="{}">
          <template #extra>
            <Tag :color="field.anChartField.actionColor || 'blue'"
              >{{ field.anChartField.action }}
            </Tag>
          </template>
          <component :is="field.chartRenderField.render" />
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card, Col, Row, Tag } from 'ant-design-vue';
  import { chartFieldRender, IChartRenderField } from '@/utils/anno/AnnoChartUtils';
  import { getEntity } from '@/api/sys/anno';
  import { AnEntity, AnnoChart, ChartFiled } from '@/api/sys/model/entitysModel';
  import { BasicForm } from '@/components/Form';
  import { getAnnoSearchForm } from '@/utils/anno';
  import { useAppInject } from '@/hooks/web/useAppInject';

  interface RenderDataField {
    chartRenderField: IChartRenderField;
    anChartField: ChartFiled;
    span: number;
  }
  const { getIsMobile } = useAppInject();
  const props = defineProps({
    entityClass: {
      type: String,
      default: '',
    },
  });
  const route = useRoute();
  const routeClazz = route.name as string;

  const annoEntityClass = ref<string>('');
  if (props.entityClass) {
    annoEntityClass.value = props.entityClass;
  } else {
    annoEntityClass.value = routeClazz;
  }

  const searchFormFields = ref<any>([]);
  const renderDataFields = ref<RenderDataField[]>([]);
  const anChart = ref<AnnoChart>();
  const spans = ref<number[]>([]);
  getEntity(annoEntityClass.value).then((res) => {
    anChart.value = (res as AnEntity).annoChart;
    let layout: number[] = anChart.value.layout;
    let searchFormEntity = anChart.value.searchForm;
    if (searchFormEntity) {
      getEntity(anChart.value.searchForm).then((res) => {
        searchFormFields.value = getAnnoSearchForm((res as AnEntity).columns, getIsMobile);
      });
    }
    layout.forEach((size) => {
      for (let i = 0; i < size; i++) {
        spans.value.push(24 / size);
      }
    });
    for (let i = 0; i < anChart.value.chartFields.length; i++) {
      let field: ChartFiled = anChart.value.chartFields[i];
      renderDataFields.value.push({
        chartRenderField: chartFieldRender(field, annoEntityClass.value, {}),
        anChartField: field,
        span: spans.value[i] || 24,
      } as RenderDataField);
    }
  });

  function handleSubmit(params: any) {
    if (!anChart.value) {
      return;
    }
    renderDataFields.value = [];
    for (let i = 0; i < anChart.value.chartFields.length; i++) {
      let field: ChartFiled = anChart.value.chartFields[i];
      renderDataFields.value.push({
        chartRenderField: chartFieldRender(field, annoEntityClass.value, params),
        anChartField: field,
        span: spans.value[i] || 24,
      } as RenderDataField);
    }
  }
</script>
<style>
  .ant-col {
    padding: 0.25rem;
  }
</style>
